<template>

  <view class="u-page">

    <div class="u-page-color">
      <!-- 用户信息 -->
      <div class="u-flex u-pt-15 u-pb-10 u-pl-10 u-pr-10 user-info">
        <div class="search-width">
          <u-search :show-action="false" :clearabled="true" shape="square" height="30" :placeholder="hotText"
                    bgColor="#ffffff" v-model="keyword" @search="search"></u-search>
        </div>
      </div>

      <div>
        <u-swiper :list="list" height="365rpx" radius="0" keyName="image" @click="clickSwiper"></u-swiper>
      </div>
    </div>

    <div class="hotsales">
      <div class="hotsales-top">
        <div class="box-title">热卖推荐</div>
        <div class="loadMore" @click="lookMore(0)">更多</div>
      </div>
      <div class="hotsales-goods u-pb-10">
        <div class="hotsales-goods-item" v-for="(item, index) in GoodSalesList" :key="index"
             @click="toGoodsDetails(item)">
          <u--image width="250rpx" height="200rpx" :src="getFirstImage(item.goodsImages)"></u--image>
          <div class="job-name">{{item.goodsName?item.goodsName:''}}</div>
          <div class="hotsales-goods-item-b">
							<span class="amount-money">
								&yen;{{ item.discountPrice }}
							</span>
              <span class="sales-volume">
								本期售{{ item.soldNum ? item.soldNum : 0 }}
							</span>
            </div>
        </div>
      </div>
    </div>

    <div class="hotsales">
      <div class="hotsales-top">
        <div class="box-title">工作推荐</div>
        <div class="loadMore" @click="lookMore(1)">更多</div>
      </div>
      <div>
        <u-scroll-list>
            <div v-for="(item, index) in JobList" :key="index">
              <div class="services-li" @click="toJobDetails(item)">
                <!-- 标题 -->
                <div class="u-title u-flex u-row-between u-col-center">
                  <div class="u-flex u-col-center u-flex-1">
                    <div class="hot-tag" v-if="item.jobTop">热</div>
                    <div class="new-tag" v-if="!item.jobTop && isNewOS(item)">新</div>
                    <div class="os-job-name">
                      {{item.jobName?item.jobName:''}}
                    </div>
                  </div>
                  <div class="os-salary" v-if="item.salary">￥{{item.salary}}</div>
                </div>
                <div class="u-pt-5">
                  {{item.company?item.company:''}}
                </div>
                <!-- 标签 -->
                <div class="u-scroll-x u-mr-5 u-pt-5" style="display: flex;justify-content: flex-start;">
                  <div class="u-mr-5">
                    <u-tag :text="item.experiece" type="info" mode="dark" size="mini"
                      bgColor="#fff3f3" color="#eb5468" borderColor="#fff3f3" v-if="item.experiece"></u-tag>
                  </div>
                  <div class="u-mr-5">
                    <u-tag :text="item.degree" type="info" borderColor="#fff3f3" mode="dark" size="mini"
                      bgColor="#fff3f3" color="#eb5468" v-if="item.degree"></u-tag>
                  </div>
                  <div class="u-mr-5">
                    <u-tag :text="item.type + item.requirements" type="info" mode="dark" size="mini"
                      color="#eb5468" bgColor="#fff3f3" borderColor="#fff3f3" v-if="item.type && item.requirements"></u-tag>
                  </div>
                  <div class="u-mr-5">
                    <u-tag :text="item.keyword.split(',')[0]" type="info" mode="dark" size="mini"
                      color="#eb5468" bgColor="#fff3f3" borderColor="#fff3f3" v-if="item.keyword"></u-tag>
                  </div>
                  <div class="u-mr-5">
                    <u-tag :text="item.keyword.split(',')[1]" type="info" mode="dark" size="mini"
                      color="#eb5468" bgColor="#fff3f3" borderColor="#fff3f3" v-if="item.keyword && item.keyword.split(',').length>1"></u-tag>
                  </div>
                </div>
                <div class="u-pt-10" style="display: flex;justify-content: space-between;">
                  <div class="u-flex">
                    <u-avatar :src="item.avatar=='男'?BoyAvatar:GirlAvatar" size="20"></u-avatar>
                    <div class="u-pl-5">{{item.leader?item.leader:''}}</div>
                    <div class="u-pl-5">{{item.posts?item.posts:''}}</div>
                  </div>
                  <div class="u-cl-content u-fz-12">
                    {{item.area?item.area:''}}
                  </div>
                </div>
              </div>
            </div>
        </u-scroll-list>
      </div>
    </div>

    <div class="hotsales">
      <div class="hotsales-top">
        <div class="box-title">活动推荐</div>
        <div class="loadMore" @click="lookMore(2)">更多</div>
      </div>
      <div>
        <u-scroll-list>
          <div class="u-mr-10" v-for="(item,index) in MarketingList" :key="index">
            <div class="market-item">
              <div @click="toMarketDetails(item)">
                <div style="padding: 30rpx 30rpx 5rpx 30rpx;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                  <span class="goods-title-tag" v-if="item.taskKeyword && item.taskType!='评测需求'">{{item.taskKeyword}}</span>
                  <span style="color: #000000;font-size: 34rpx;font-weight: bold;height: 50rpx;line-height: 50rpx;">
                    {{item.taskName?item.taskName:''}}
                  </span>
                </div>
                <div class="u-flex u-col-center" style="padding: 5rpx 30rpx;">
                  <div style="color: #f94d4d;font-size: 44rpx;font-weight: bold;margin: 0 10rpx 10rpx 0;">&yen;{{item.taskPrice?item.taskPrice:0}}</div>
                  <div class="u-mr-5"><u-tag :text="item.taskLabel" mode="plain" size="mini" :color="item.taskColor" :borderColor="item.taskColor" bgColor="#ffffff" /></div>
                  <div v-if="item.couponLabel"><u-tag :text="item.couponLabel" mode="plain" size="mini" color="#e66142" bgColor="#faede4" borderColor="#faede4" /></div>
                </div>
                <div class="u-flex" style="padding: 0 20rpx;">
                  <div style="padding: 0 5rpx;" v-for="(titem,tindex) in getSplitImage(item.imageUrl)" :key="tindex">
                    <u-image width="220rpx" height="220rpx" :src="titem" border-radius="10"></u-image>
                  </div>
                </div>
              </div>
              <div style="padding: 20rpx 30rpx;color: #bcbcbc;">
                {{item.createTime}}
              </div>
            </div>
          </div>
        </u-scroll-list>
      </div>
    </div>

    <div class="u-page-color-other">
      <div class="u-pt-10" style="width: 95%;margin: 0 auto;" v-for="(item,index) in IndexBottom" :key="index">
        <u-image width="100%" height="200rpx" border-radius="20" :src="item.image"
                 @click="routeAD(item.link,item.source)"></u-image>
      </div>
    </div>

  </view>
</template>

<script>
import globalData from "@/globalData";

export default {

  data() {
    return {
      list: [],
      WorkGuides: [],//工作指南
      IndexBottom: [],//底部广告图
      GoodSalesList: [],
      UserInfo: {},
      KF_show: false,//寻找客服模态框
      KF_content: '',
      backgroundColor: 'linear-gradient(to right , #f6ede6, #eeceed)',
      // title: '玫丽工作平台',
      background: {
        // 导航栏背景图
        // background: 'url(/static/images/logo.png) no-repeat',
        // 还可以设置背景图size属性
        // backgroundSize: 'cover',
        // 渐变色
        backgroundImage: 'linear-gradient(to right , #f6ede6, #eeceed)'
      },
      hotText: '请输入关键词',
      JobList: [],
      MarketingList: [],
    }
  },

  mounted() {

  },

  onShow() {
    
  },

  onPullDownRefresh() {
    this.getAds()
    this.getGoodSalesList()
    this.getJobList()
    this.getMarketingList()
    // 停止Loading
    uni.stopPullDownRefresh();
  },

  onReachBottom() {

  },

  onLoad(option) {
    this.UserInfo = uni.getStorageSync('userInfo')
    this.getAds()
    this.getGoodSalesList()
    this.getJobList()
    this.getMarketingList()
  },

  methods: {
   
    /**
     * 获取首页广告图
     */
    async getAds() {
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/config/list",
        configType: "index"
      });
      if (result.code == 200) {
        let rows = result.rows
        if (rows.length > 0) {
          this.list = []
          this.WorkGuides = []
          this.IndexBottom = []
          this.activityList = []
          for (const i in rows) {
            if (rows[i].configKey == 'index-top') {
              let obj = {image: rows[i].imageLink.split(",")[0], link: rows[i].configLink, source: rows[i].configFrom}
              this.list.push(obj)
            } else if (rows[i].configKey == 'index-work-guide') {
              let obj = {image: rows[i].imageLink.split(",")[0], link: rows[i].configLink, source: rows[i].configFrom}
              this.WorkGuides.push(obj)
            } else if (rows[i].configKey == 'index-bottom') {
              let obj = {image: rows[i].imageLink.split(",")[0], link: rows[i].configLink, source: rows[i].configFrom}
              this.IndexBottom.push(obj)
            } else if (rows[i].configKey == 'index-activity') {
              let obj = {image: rows[i].imageLink.split(",")[0], link: rows[i].configLink, source: rows[i].configFrom}
              this.activityList.push(obj)
            }
          }
        }
      }
    },

    /**
     * 点击轮播图跳转
     */
    clickSwiper(index) {
      this.routeAD(this.list[index].link, this.list[index].source)
    },

    /**
     * 搜索
     */
    async search() {
      if (this.keyword) {
        this.$u.route("/pages_tabbar_contact/index_contact/jobOpportunities?keyword=" + this.keyword);
      }

    },

    /**
     * 路由跳转
     */
    routePage(item) {
      this.$u.route(item.taskUrl)
    },

    /**
     * 获取商品销售类列表数据
     */
     async getGoodSalesList() {
        let result = await this.$u.api.unifyMiniRest({
          systemid: "meily",
          url: "/goods/shelf/list",
          pageNum: 1,
          pageSize: 5,
          loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
        });
        if (result.code == 200) {
          this.GoodSalesList = result.rows
        }
      },

      //获取工作数据
      async getJobList() {
        let result = await this.$u.api.unifyMiniRest({
          systemid: "meily",
          url: "/job/applet/list",
          status: "招聘中",
          pageNum: 1,
          pageSize: 5,
          loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
        });
        if (result.code == 200) {
          let jobListTemp = result.rows.map(item => {
            if (this.isNotNull(item.area)){
              item.area = item.area.replace("-"," ")
            }
            return item;
          })
          this.JobList = jobListTemp
        }
      },

      //获取活动数据
      async getMarketingList() {
        let result = await this.$u.api.unifyMiniRest({
          systemid: "meily",
          url: "/hall/list",
          collectType: 'market',
          pageNum: 2,
          pageSize: 5,
          loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
        });
        if (result.code == 200) {
          this.MarketingList = result.rows
        }
      },

      /**
       * 通过图片链接使用逗号分隔成数组，取第一个
       */
      getFirstImage(image) {
        if (image) {
          return image.split(",")[0]
        } else {
          return ''
        }
      },

      /**
      * 判断招聘是否在一周内（标签显示为新）
      */
      isNewOS(item) {
        let now = new Date()//获取当前时间戳
        let createTime = new Date(item.createTime.replace(/-/g,"/"))//距离的时间
        let index = (now - createTime)/1000/(60*60*24)
        let day = parseInt(index)//天
        if(day < 8){
          return true
        }
        return false
      },

      // 根据图片地址获取前三张图片放到数组中返回
      getSplitImage(imageUrl) {
        let imageList = imageUrl.split(',');
        let imageList2 = [];
        for (let i = 0; i < imageList.length; i++) {
          if (i < 3) {
            imageList2.push(imageList[i]);
          }
        }
        return imageList2;
      },

      /**
      * 跳转到服务页面
      */
      lookMore(index) {
        if(index) {
          uni.reLaunch({url: '/pages/index/serviceIndex?current='+index})
        }else{
          uni.reLaunch({url: '/pages/index/serviceIndex'})
        }
      },

      /**
       * 跳转到商品详情
       */
      async toGoodsDetails(item) {
        // 跳转到销售机会页面
        uni.$u.route('/pages_tabbar_contact/GoodsDetails', {
          goodsNo: item.goodsNo,
          goodsId: item.goodsId
        });
      },

      /**
       * 跳转到工作详情
       */	
      async toJobDetails(item) {
        uni.$u.route('/pages_tabbar_contact/JobDetails', {
          jobId: item.jobId
        });
      },

      /**
       * 跳转到活动详情
       */
      async toMarketDetails(item) {
        if(item.taskType == '评测需求') {
          uni.$u.route('/pages_tabbar_contact/EvaluationDetails', {
            docUnid: item.taskCurrentId
          });
        }else if(item.taskType == '样品发放') {
          uni.$u.route('/pages_tabbar_contact/SamplesDetails', {
            docUnid: item.taskCurrentId
          });
        }
      },

  }

};
</script>

<style lang="scss" scoped>

.title {
  font-size: 32rpx;
  font-weight: bold;
}

li {
  padding-top: 20rpx;
}

.search {
  width: 100%;
  text-align: left;
  background-color: #fff;
  padding-top: 20rpx;
}

.search-width {
  // width: 88%;
  width: 100%;
}

.job-name {
  padding-left: 10rpx;
  padding-top: 10rpx;
  font-size: 30rpx;
  font-weight: bold;
  width: 240rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.job-price {
  padding-top: 5rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #f02323;
  width: 250rpx;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: clip;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.loadMore {
  text-decoration: underline;
  color: #828282;
  text-align: center;
}

.user-info {
  background: linear-gradient(to right, #f6ede6, #eeceed)
}

.box-title {
  font-size: 36rpx;
  font-weight: 550;
  text-align: center;
  color: #282728;
}

.slot-content {
  font-size: 28rpx;
  color: #bcbcbc;
  text-align: left;
  width: 85%;
  margin: 0 auto;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.mask-solt {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.hotsales-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
}

.hotsales {
  background: #ffffff;
  width: 93%;
  margin: 0 auto;
  padding-top: 30rpx;
}

.hotsales-goods {
  width: 100%;
  height: 330rpx;
  display: flex;
  overflow-x: scroll;
}

.hotsales-goods-item {
  width: 250rpx;
  border-radius: 15rpx !important;
  background: #ffffff;
  box-shadow: 0 0 10rpx #e5e5e5;
  margin-right: 15rpx;
}

.amount-money {
  color: #ea4d5e;
  font-size: 32rpx;
  font-weight: bold;
  vertical-align: bottom;
}

.sales-volume {
  color: #b7b7b7;
  font-size: 22rpx;
  vertical-align: bottom;
  padding-bottom: 5rpx;
}

.hotsales-goods-item-b {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0rpx 10rpx 10rpx 10rpx;
}

.services-li {
	width: 600rpx;
	background-color: #fffdfe;
	padding: 30rpx 20rpx;
	border-radius: 10rpx;
  margin-right: 20rpx;
	box-shadow: 2rpx 6rpx 20rpx #efebeb;
	border-bottom: 2rpx solid #efebeb;
	border-right: 2rpx solid #efebeb;
}

.os-job-name {
	font-size: 32rpx;
}

.os-salary {
	color: #ea4d5e;
	font-size: 32rpx;
}

.hot-tag {
	padding: 0rpx 6rpx;
	background-color: #ffa800;
	color: #ffffff;
	border-radius: 5rpx;
	font-size: 26rpx;
	font-weight: 440;
	height: 36rpx;
	line-height: 36rpx;
	margin-right: 10rpx;
}

.new-tag {
	padding: 0rpx 6rpx;
	background-color: #ea4d5e;
	color: #ffffff;
	border-radius: 5rpx;
	font-size: 26rpx;
	font-weight: 440;
	height: 36rpx;
	line-height: 32rpx;
	margin-right: 10rpx;
}

.market-item {
  background-color: #fffdfe;
  width: 720rpx;
  border-radius: 10rpx;
  box-shadow: 2rpx 6rpx 20rpx #efebeb;
  border-bottom: 2rpx solid #efebeb;
  border-right: 2rpx solid #efebeb;
  border-left: 2rpx solid #efebeb;
}

.goods-title-tag {
	color: #ffffff;
	background-color: #40972f;
	border-radius: 6rpx;
	font-size: 26rpx;
	margin-right: 3rpx;
	font-weight: 350;
	padding: 2rpx 10rpx;
	margin-right: 5rpx;
}

</style>
